<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<%
	String ctx = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Movies</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords"
	content="My Play Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript">
	
	 addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } 

</script>
<!-- bootstrap -->
<link href="css/bootstrap.min.css" rel='stylesheet' type='text/css'
	media="all" />
<!-- //bootstrap -->
<link href="css/dashboard.css" rel="stylesheet">
<!-- Custom Theme files -->
<link href="css/style.css" rel='stylesheet' type='text/css' media="all" />
<script src="js/jquery-1.11.1.min.js"></script>
<!--start-smoth-scrolling-->
<!-- fonts -->
<link
	href='http://fonts.useso.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800'
	rel='stylesheet' type='text/css'>
<link href='http://fonts.useso.com/css?family=Poiret+One'
	rel='stylesheet' type='text/css'>
<!-- //fonts -->
</head>
<body>

	<nav class="navbar navbar-inverse navbar-fixed-top">
	<div class="container-fluid">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed"
				data-toggle="collapse" data-target="#navbar" aria-expanded="false"
				aria-controls="navbar">
				<span class="sr-only">Toggle navigation</span> <span
					class="icon-bar"></span> <span class="icon-bar"></span> <span
					class="icon-bar"></span>
			</button>
		</div>
		<div id="navbar" class="navbar-collapse collapse">
			<div class="top-search">
				<form class="navbar-form navbar-right"
					action="<%=ctx%>/song/selectSong">
					<input type="text" class="form-control" placeholder="输入歌曲名">
					<input type="submit" value=" ">
				</form>
			</div>

			&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
			<c:if test="${sessionScope.loginUser != null }">
				&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
				<div class="side-bottom-icons">
					<ul class="nav2">
						<li style="color: black;">个人设置</li>
						<li><a href="<%=ctx%>/user/toAbout" class="facebook"></a></li>
						<li style="color: black;">退出账户</li>
						<li><a href="<%=ctx%>/user/logout" class="facebook dribbble">
						</a></li>
					</ul>
				</div>
			</c:if>

			<c:if test="${sessionScope.loginUser ==null }">
				<div class="signin">
					<a href="#small-dialog2" class="play-icon popup-with-zoom-anim">注册</a>
					<!-- pop-up-box -->
					<script type="text/javascript" src="js/modernizr.custom.min.js"></script>
					<link href="css/popuo-box.css" rel="stylesheet" type="text/css"
						media="all" />
					<script src="js/jquery.magnific-popup.js" type="text/javascript"></script>
					<!--//pop-up-box -->
					<div id="small-dialog2" class="mfp-hide">
						<h3>注册账户</h3>
						<div class="social-sits">
							<div class="facebook-button">
								<a href="#">这写个啥</a>
							</div>
							<div class="chrome-button">
								<a href="#">这写个啥</a>
							</div>
							<div class="button-bottom">
								<p>
									已有账号？ <a href="#small-dialog"
										class="play-icon popup-with-zoom-anim">登录</a>
								</p>
							</div>
						</div>
						<div class="signup">
							<form>
								<input type="text" class="email" placeholder="Your Name"
									maxlength="10" required="required" />
								<!-- <input type="text" class="email" placeholder="Password" maxlength="10" pattern="[1-9]{1}\d{9}" /> -->
							</form>
							<div class="continue-button">
								<a href="#small-dialog3"
									class="hvr-shutter-out-horizontal play-icon popup-with-zoom-anim">下一步</a>
							</div>
						</div>
						<div class="clearfix"></div>
					</div>
					<div id="small-dialog3" class="mfp-hide">
						<h3>注册账号</h3>
						<div class="social-sits">
							<div class="facebook-button">
								<a href="#">Connect with Facebook</a>
							</div>
							<div class="chrome-button">
								<a href="#">Connect with Google</a>
							</div>
							<div class="button-bottom">
								<p>
									已有账号？ <a href="#small-dialog"
										class="play-icon popup-with-zoom-anim">登录</a>
								</p>
							</div>
						</div>
						<div class="signup">
							<form>
								<input type="text" class="email" placeholder="Email"
									required="required" pattern="([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?"
									title="Enter a valid email" /> <input type="password"
									placeholder="Password" required="required" pattern=".{6,}"
									title="Minimum 6 characters required" autocomplete="off" /> <input
									type="text" class="email" placeholder="Mobile Number"
									maxlength="10" pattern="[1-9]{1}\d{9}"
									title="Enter a valid mobile number" /> <input type="submit"
									value="点击注册" />
							</form>
						</div>
						<div class="clearfix"></div>
					</div>
					<div id="small-dialog7" class="mfp-hide">
						<h3>注册账号</h3>
						<div class="social-sits">
							<div class="facebook-button">
								<a href="#">Connect with Facebook</a>
							</div>
							<div class="chrome-button">
								<a href="#">Connect with Google</a>
							</div>
							<div class="button-bottom">
								<p>
									已有账号？ <a href="#small-dialog"
										class="play-icon popup-with-zoom-anim">登录</a>
								</p>
							</div>
						</div>
						<div class="signup">
							<form action="upload.jsp">
								<input type="text" class="email" placeholder="Email"
									required="required" pattern="([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?"
									title="Enter a valid email" /> <input type="password"
									placeholder="Password" required="required" pattern=".{6,}"
									title="Minimum 6 characters required" autocomplete="off" /> <input
									type="submit" value="Sign In" />
							</form>
						</div>
						<div class="clearfix"></div>
					</div>
					<script>
						$(document).ready(function() {
							$('.popup-with-zoom-anim').magnificPopup({
								type : 'inline',
								fixedContentPos : false,
								fixedBgPos : true,
								overflowY : 'auto',
								closeBtnInside : true,
								preloader : false,
								midClick : true,
								removalDelay : 300,
								mainClass : 'my-mfp-zoom-in'
							});

						});
					</script>
				</div>
				<div class="signin">
					<a href="#small-dialog" class="play-icon popup-with-zoom-anim">登录</a>
					<div id="small-dialog" class="mfp-hide">
						<h3>登录账户</h3>
						<div class="social-sits">
							<div class="facebook-button">
								<a href="#">这写个啥</a>
							</div>
							<div class="chrome-button">
								<a href="#">这写个啥</a>
							</div>
							<div class="button-bottom">
								<p>
									没有账号? <a href="#small-dialog2"
										class="play-icon popup-with-zoom-anim">注册</a>
								</p>
							</div>
						</div>
						<div class="signup">
							<form>
								<input type="text" class="email" placeholder="Enter Username"
									required="required" pattern="([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?" />
								<input type="password" placeholder="Password"
									required="required" pattern=".{6,}"
									title="Minimum 6 characters required" autocomplete="off" /> <input
									type="submit" value="登录" />
							</form>
							<div class="forgot">
								<a href="#">忘记密码 ?</a>
							</div>
						</div>
						<div class="clearfix"></div>
					</div>
			</c:if>
		</div>
		<div class="clearfix"></div>
	</div>

	<div class="clearfix"></div>
	</div>
	</div>
	<div class="clearfix"></div>
	</div>
	</nav>

	<div class="col-sm-3 col-md-2 sidebar">
		<div class="top-navigation">
			<div class="t-menu">MENU</div>
			<div class="t-img">
				<img src="images/lines.png" alt="" />
			</div>
			<div class="clearfix"></div>
		</div>
		<div class="drop-navigation drop-navigation">
			<ul class="nav nav-sidebar">
				<li class="active"><a href="<%=ctx%>/user/toIndexView"
					class="home-icon"><span class="glyphicon glyphicon-home"
						aria-hidden="true"></span>Home</a></li>
				<li><a href="<%=ctx%>/songList/selectSongListByType"
					class="user-icon"><span
						class="glyphicon glyphicon-home glyphicon-blackboard"
						aria-hidden="true"></span>歌单</a></li>
				<li><a href="history.jsp" class="sub-icon"><span
						class="glyphicon glyphicon-home glyphicon-hourglass"
						aria-hidden="true"></span>音乐人</a></li>
				<li><a href="javascript:void(0);" class="menu1"><span
						class="glyphicon glyphicon-film" aria-hidden="true"></span>排行榜<span
						class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></a></li>
				<ul class="cl-effect-2">
					<li><a href="<%=ctx%>/song/selectSongByCounts">热歌榜</a></li>
					<li><a href="<%=ctx%>/song/selectSongByComment">热评榜</a></li>
					<li><a href="<%=ctx%>/song/selectSongByCreate">新歌榜</a></li>
				</ul>
				<!-- script-for-menu -->
				<script>
					$("li a.menu1").click(function() {
						$("ul.cl-effect-2").slideToggle(300, function() {
							// Animation complete.
						});
					});
				</script>
				<li><a href="javascript:void(0);" class="menu"><span
						class="glyphicon glyphicon-film glyphicon-king" aria-hidden="true"></span>分类听歌<span
						class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></a></li>
				<ul class="cl-effect-1">
					<li><a href="<%=ctx%>/song/selectSongByType?type=1">说唱</a></li>
					<li><a href="<%=ctx%>/song/selectSongByType?type=2">摇滚</a></li>
					<li><a href="<%=ctx%>/song/selectSongByType?type=3">流行</a></li>
					<li><a href="<%=ctx%>/song/selectSongByType?type=4">民谣</a></li>
				</ul>
				<!-- script-for-menu -->
				<script>
					$("li a.menu").click(function() {
						$("ul.cl-effect-1").slideToggle(300, function() {
							// Animation complete.
						});
					});
				</script>
			</ul>
			<!-- script-for-menu -->
			<script>
				$(".top-navigation").click(function() {
					$(".drop-navigation").slideToggle(300, function() {
						// Animation complete.
					});
				});
			</script>
		</div>
	</div>
	<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
		<div class="show-top-grids">
			<div class="col-sm-10 show-grid-left main-grids">
				<div class="recommended">
					<div class="recommended-grids english-grid">
						<div class="recommended-info">
							<div class="heading">

									<form action="<%=ctx%>/user/songUpload"
													method="post" enctype="multipart/form-data">
									<table>
									<tr>
											<td>歌曲名</td>
											<td><input type="text" name="songName" id="songName" required="required"></td>
										</tr>
											<tr>
											<td>歌曲类型</td>
											<td><select name="type">
											<option value=1>说唱</option>
											<option value=2>摇滚</option>
											<option value=3>流行</option>
											<option value=4>民谣</option>
											</td>
										</tr>
										<tr><td>上传歌曲</td>
											<td>
													请选择上传文件：<input type="file" name="filename">
													<!-- multiple="multiple" -->
													<br> <input type="submit" value="下一步">
												</td>
										</tr>
									</table></form>
									<a href="<%=ctx%>/user/toAbout">暂不上传</a>
								<%-- <div class="continue-button">
											<a href="<%=ctx%>/user/singerRegist?realName=${realName}"
												>下一步</a>
										</div> --%>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- Bootstrap core JavaScript
    ================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script src="js/bootstrap.min.js"></script>
	<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
</body>
</html>